<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<%@ include file="/WEB-INF/views/include/head.jsp"%>
<link rel="stylesheet" href="${ctxStatic}/css/list.css">
<script type="text/javascript">
    $(function() {
        $(".tabBox ul li").each(
                function() {
                    var index = $(this).index();

                    $(".tabBox ul li").eq(0).addClass("active");

                    $(this).click(
                            function() {

                                //alert(index);

                                $(this).addClass("active").siblings()
                                        .removeClass("active");

                                $(".tabBoxSm > .tabBox").eq(index).stop(true)
                                        .show().siblings().stop(true).hide();

                            })

                })

        $('.ckBox1 input[type="checkbox"]').each(
                function() {
                    $(this).on(
                            'click',
                            function() {
                                if ($(this).is(':checked')) {
                                    var name=$(this).parent().parent().find("p").text();
                                    $(this).parent().siblings('.disabled').find('select').attr("data-rule-required","true");
                                    $(this).parent().siblings('.disabled').find('select').attr("data-msg-required","请选择" + name);
                                    $(this).parent().siblings('.disabled').find('input').removeAttr('disabled');
                                    $(this).parent().siblings('.disabled').find('select').removeAttr('disabled');
                                } else {
                                    $(this).parent().siblings('.disabled').find('select').attr('disabled','disabled');
                                    $(this).parent().siblings('.disabled').find('select').attr("data-rule-required","false");
                                    $(this).parent().siblings('.disabled').find('select').attr('disabled','disabled');
                                  
                                }
                                changeTitleInfo();
                            })

                })

    })

    // 下拉框信息信息查询
    function selectAcc(id) {

        strs = id.split("-");
        var cd = strs[0];
        var id = strs[1];
        id = cd + id;
       

        if ($("#" + id).prop("disabled")) {

            $("#" + id).removeAttr("disabled");
            var param = {
                "code" : strs[1]
            };
            $.post(
                            "${ctx}/style/mystyle/formtwotoptwo",
                            param,
                            function(result) {
                                var html = "<option value=''><spring:message code="order_please_choose"/></option>";
                                $.each(
                                                result,
                                                function(i, e) {

                                                    html += "<option value='"+e.styleOption.itemCd+"-"+e.styleOption.itemValue+"'>"
                                                            + e.styleOption.itemNameCn
                                                            + "</option>";
                                                });
                                $("#" + id).html(html);
                            }, 'json');

        } else {
            $("#" + id).attr("disabled", "disabled");
            var html = "<option value=''><spring:message code="order_please_choose"/></option>";
            $("#" + id).html(html);
        }
    }

    // 5TOP 子页面回调
    function childCallBack(value,pageFileUrl) {

        var strs= new Array();
        strs=value.split("~");
        var fatherId=strs[0];
        var cd= strs[1];
        var value= strs[2];
        var name= strs[3];
        var fileUrl= null;
        
        if (strs.length == 5) {
            fileUrl = strs[4];
        }

        $("#"+fatherId).val(fatherId+"-"+value);
        $("#"+fatherId).text(name);
        $("#"+fatherId).parent().parent().parent().find('input[type=checkbox]').attr("checked","checked");
        $("#"+fatherId).parent().parent().parent().find('select').removeAttr('disabled');

        if(fileUrl != null && fileUrl != ''){
            $("#"+fatherId).parents('.ord_top').next('.ord_left').find('img').attr('src',fileUrl).show();
        }else{
            $("#"+fatherId).parents('.ord_top').next('.ord_left').find('img').attr('src',"${ctxStatic}/images/pic-none.jpg").show();
        }
        
        $("#"+fatherId).val(fatherId+"-"+value).parent().select2();
        changeTitleInfo();
        
    }
    
    /*标题*/
    function changeTitleInfo() {

        var params = $("#inputForm").serialize();
    
        
        $.post("${ctx}/order/createOrder/titleShow2?typeFlag=5&&id=0", params, function(result) {
            
            var h = $(callBackHtml(result)).find("#title").html();
            $('#title').html(h);
            var windowH2 = window.parent.windowHIframe;
            $('.TxtInfoSm1,.scrollBox').css('height', windowH2 - 368);
         }, 'html');

    }
    
    
    /*下一步*/
    var saveForm={
        s:null,
        save:function(s){
                this.s=s;
               // if (!validate()){
                    //return;
                //}
                $("#inputForm").validate({
                    submitHandler : function() {
                        var params = $("#inputForm").serialize();
                        $.post("${ctx}/order/createOrder3/saveOrderToSession5", params, function(result) {
                            
                            // 有错误
                            if (result == "false") {
                                $("#inputForm")[0].reset();
                            }
                             // 跳转至第二页面
                            else {
                                window.location.href="${ctx}/order/createOrder3/form6?id=0";
                            }
                        }, 'json');
                    }
                });
                
                $("#inputForm").validate({});
                $("#inputForm").submit(); 
        }
     }
    
    /*入力是否合法*/
    function validate() {

        // checkBox
        var cb = $("input[name='mixedIngredientsItemList']");
        // option
        var op = $("select[name='mixedIngredientsOptionList']");
        
        for (var i = 0 ; i < cb.length; i ++) {
            // 加值，减值只能入力其中一个数据
            if (cb[i].checked) {
                if(op[i].value == null || $.trim(op[i].value) == "" || op[i].value == "null") {
                    // 请选择相应选项
                    layer.msg('<spring:message code="order_please_choose_option_item"/>', {time:1000}); 
                    return false;
                }
               
            }
        }
       return true;
    }
</script>
</head>
<body>

    <div class="myshop">
        <!-- 创建订单 -->
        <p class="myshoptop"><spring:message code="order_create_order"/></p>
    </div>

    <div class="myshop_middle_order">
        <!-- 标题 -->
        <div class="orderTit orderTitShow clearfix">
            <div class="titSm off">
                <!-- 基本信息 -->
                <p><spring:message code="order_basic_info"/></p>
                <img src="${ctxStatic}/images/order_01_off.png">
            </div>
            <div class="titSm off" onclick='window.location.href="${ctx}/order/createOrder2/initUpdateOrder2?id=${order.id}"'>
                <!-- 量体信息 -->
                <p><spring:message code="order_fit_property_info"/></p>
                <img src="${ctxStatic}/images/order_02_off.png">
            </div>
            <div class="titSm off" onclick='window.location.href="${ctx}/order/createOrder3/form3?id=${order.id}"'>
                <!-- 款式定制 -->
                <p><spring:message code="order_style_customization"/></p>
                <img src="${ctxStatic}/images/order_03_off.png">
            </div>
            <div class="titSm off" onclick='window.location.href="${ctx}/order/createOrder3/form4?id=${order.id}"'>
                <!-- 辅料 -->
                <p><spring:message code="order_accessory"/></p>
                <img src="${ctxStatic}/images/order_04_off.png">
            </div>
            <div class="titSm off" onclick='window.location.href="${ctx}/order/createOrder3/form5?id=${order.id}"'>
                <!-- 配料 -->
                <p><spring:message code="order_burdening"/></p>
                <img src="${ctxStatic}/images/order_05_off.png" onclick='window.location.href="${ctx}/order/createOrder3/form5?id=0"'>
            </div>
            <div class="titSm off" onclick='window.location.href="${ctx}/order/createOrder3/form6?id=${order.id}"'>
                <!-- 刺绣 -->
                <p><spring:message code="order_embroidery"/></p>
                <img src="${ctxStatic}/images/order_06_on.png">
            </div>
            <div class="titSm off" onclick='window.location.href="${ctx}/order/createOrder3/form7?id=${order.id}"'>
                <!-- 标牌 -->
                <p><spring:message code="order_brand"/></p>
                <img src="${ctxStatic}/images/order_07_on.png">
            </div>
            <div class="titSm off" onclick='window.location.href="${ctx}/order/createOrder3/form8?id=${order.id}"'>
                <!-- 售价 -->
                <p><spring:message code="order_sales_price"/></p>
                <img src="${ctxStatic}/images/order_08_on.png">
            </div>
        </div>

        <form id="inputForm">
            <div class="top_first clearfix">
                <div class="contentBox cnBx">
                    <!-- 配料 -->
                    <p class="contentTit cnBy"><spring:message code="order_burdening"/></p>
                    <div class="formBox scrollBox">
                        <div class="clearfix">
                            <div class="ch fl cn-mx">
                                <input name="id" type="hidden" value="0"/>
                                <c:forEach items="${mixedIngredientsList}" var="item" varStatus="status">
                                
                                    <c:set var="inputFlag" scope="page" value="0"></c:set>
                                    <!-- 折行开始 -->
                                    <c:if test="${status.index%2 == 0}">
                                        <div class="data clearfix">
                                    </c:if>
                                        <!-- 左数据 -->
                                           <c:if test="${status.index%2 == 0}">
                                            <div class="ch_middle fl">
                                        </c:if>
                                        <!-- 右数据 -->
                                        <c:if test="${status.index%2 == 1}">
                                            <div class="ch_middle fr">
                                        </c:if>
                                        
                                        
                                        <c:forEach items="${ShowOptionList}" var="itemShow" varStatus="itemStatus">
                                                <c:if test="${itemShow.itemCD == item.styleOption.itemCd and itemShow.itemValue == item.styleOption.itemValue}">
                                                <c:set var="inputFlag" scope="page" value="1"></c:set>
                                                <div class="ord_top">
                                                    <div class="ckBox1 fl">
                                                        <input type="checkbox" checked name="mixedIngredientsItemList" value="${item.styleOption.itemCd}-${item.styleOption.itemValue}" onclick="selectAcc('${item.styleOption.itemCd}-${item.styleOption.itemValue}')">
                                                    </div>
                                                    <!-- 配料名称 -->
                                                    <div class="fl clearfix orderSelectBox" onclick="popup('800px','470px','${ctx}/style/mystyle/formtwoChildPage?topFlag=3&childValue=${item.styleOption.itemValue}&fatherId=${item.styleOption.itemValue}&dJitemNameCn=${item.styleOption.itemNameCn}&orderFlag=1')">
	                                                    <p class="rtname data_id">${item.styleOption.itemNameCn}</p>
	                                                    <div class="order_3" >
	                                                        <img src="${ctxStatic}/images/icon_right-2.png">
	                                                    </div>
                                                    </div>
                                                       <!-- 备注 -->
                                                    <div class="disabled">
                                                        <select class="form-control sexLg" name="mixedIngredientsOptionList">
                                                            <option id="${itemShow.itemValue}-${itemShow.optionValue}" value="${itemShow.itemValue}-${itemShow.optionValue}"> ${itemShow.optionNameCN}</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            <!-- 款式图片 -->
                                            <div class="ord_left">
                                                <c:choose>
                                                    <c:when test="${item.styleOption.childUrl!=null && item.styleOption.childUrl!=''}">
                                                        <img src="${item.styleOption.childUrl}" class="tableImg">
                                                        <img src="${item.styleOption.childUrl}" class="posImg">
                                                    </c:when>
                                                    <c:otherwise>
                                                        <img src="${ctxStatic}/images/pic-none.jpg">
                                                    </c:otherwise>
                                                </c:choose>
                                            </div>
                                            </c:if>
                                        </c:forEach>
                                        
                                        <!-- 如果之前没被显示过 -->
                                        <c:if test='${pageScope.inputFlag == "0"}'>
                                            <div class="ord_top">
                                                <div class="ckBox1 fl">
                                                    <input type="checkbox" name="mixedIngredientsItemList" value="${item.styleOption.itemCd}-${item.styleOption.itemValue}" onclick="selectAcc('${item.styleOption.itemCd}-${item.styleOption.itemValue}')">
                                                </div>
                                                <!-- 配料名称 -->
                                                <div class="fl clearfix orderSelectBox" onclick="popup('800px','470px','${ctx}/style/mystyle/formtwoChildPage?topFlag=3&childValue=${item.styleOption.itemValue}&fatherId=${item.styleOption.itemValue}&dJitemNameCn=${item.styleOption.itemNameCn}&orderFlag=1')">
	                                                <p class="rtname data_id">${item.styleOption.itemNameCn}</p>
	                                                <div class="order_3" >
	                                                    <img src="${ctxStatic}/images/icon_right-2.png">
	                                                </div>
                                                </div>
                                                   <!-- 备注 -->
                                                <div class="disabled">
                                                    <select class="form-control sexLg" name="mixedIngredientsOptionList" disabled="disabled">
                                                        <option id="${item.styleOption.itemValue}"></option>
                                                    </select>
                                                </div>
                                            </div>
                                            <!-- 款式图片 -->
                                            <div class="ord_left">
                                                <img src="" style="display:none;">
                                            </div>
                                        </c:if>

                                        </div>
                                        
                                    <!-- 折行结束 -->
                                    <c:if test="${status.index%2 == 1 || status.index == (fn:length(mixedIngredientsList)-1)}">
                                        </div>
                                    </c:if>
                                </c:forEach>
                            
                            </div><!-- 29 -->
                        
                        
                        </div><!-- 27 -->
                    </div><!-- 26 -->
                </div><!-- 24 -->
            </form>
            
            

        <!-- 订单信息显示 -->
        <%@ include file="/WEB-INF/views/modules/order/orderCreateTitle.jsp"%>

        </div>

        <div class="Pre-box">
            <!-- 上一步 -->
            <div class="Pre-1" onclick='window.location.href="${ctx}/order/createOrder3/form4?id=0"'><spring:message code="order_back_step"/></div>
            <!-- 取消 -->
            <div class="Pre-2" onclick="window.parent.frames[0].location.href = '${ctx}/order/order/'"><spring:message code="order_cancel"/></div>
            <!-- 下一步 -->
            <div class="Pre-1" onclick="saveForm.save(0);"><spring:message code="order_next_step"/></div>
        </div>
    </div>
    <script src="${ctxStatic}/layer/layerStyle.js"></script>
    <script>
        var windowH2 = window.parent.windowHIframe
        $('.TxtInfoSm1,.scrollBox').css('height', windowH2 - 368);

        var listH = $(':root').css('height')
        $(window.parent.$("#mainFrame").css('height', listH));
    </script>
</body>
</html>